

import { Navigator, View } from "@tarojs/components";

import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import Page from "@/components/common/Page";
import ByIcon from "@/components/ui/ByIcon";
import ByAvatar from "@/components/ui/ByAvatar";
import PageHeader from "@/components/common/PageHeader";

import useAuth from "@/hooks/useAuth";
import useAppStore from "@/store";

const ApplicationItem = ({ item, colors }: { item: any; colors: string[] }) => {
  return (
    <ByCol span={3} className="w-[120px] text-center my-2">
      <Navigator url={item.url} hoverClass="none">
        <View
          className="flex-center mx-auto w-[110px] h-[110px] rounded-[30px] border-1"
          style={{ backgroundColor: colors[0], borderColor: colors[0] }}
        >
          <ByIcon name={item.icon} size={66} color={colors[1]} />
        </View>
        <View className="text-sm text-second mt-2">{item.label}</View>
      </Navigator>
    </ByCol>
  );
};

const list = [
  {
    label: "工人质保金",
    icon: "PlanFormulation",
    authCode: "WeiXinApp_WorkerQuantiyGold",
    url: "works",
  },
  {
    label: "报表",
    icon: "Statistic",
    url: "statistic",
  }
];
export default () => {
  const userInfo = useAppStore((state) => state.userInfo);
  const getAuth = useAuth();

  return (
    <Page
      slotHeader={
        <View className="bg-page">
          <PageHeader showBack={false}>
            <Navigator hover-class="none" url="/pages/mine/index">
              <ByAvatar
                src={userInfo?.avatar}
                alt={userInfo?.user_name}
                className="bg-primary text-white"
              />
            </Navigator>
          </PageHeader>
        </View>
      }
    >
      <View className="mb-5">
        <ByRow wrap>
          {list.map((item, index) => getAuth(item.authCode) && (
            <ApplicationItem
              key={index}
              item={item}
              colors={["#b8a7f750", "#7151ea"]}
            />
          ))}
        </ByRow>
      </View>
    </Page>
  );
};
